<style>
  .card{
    background-color:#fff;
    border: 1px solid #d8d8d8;
    cursor: pointer;
  }
  .scoreBox{

  }
  .bg{
    background-color: #f5f5f5;
  }
  .name{
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #37a;
    overflow: hidden;
  }
  .icon{
    height: 16px;
    width: 16px;
    font-size: 16px;
  }
  .time{
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #666;

  }
.mytitle{
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px ;
}
  ::ng-deep .ant-rate {
    color: #37a;
    font-size: 13px;

  }
  .space{
    margin-bottom: 15px;
  }
  .searchwords{
    font-size: 13px;
    color: #666666;
  }
  ::ng-deep .ant-empty {

    text-align: left;
  }
</style>
<div style="height: 100px" class="bg"></div>
<div class="center bg">
  <div style="width: 80%">
    <!--搜索框-->
    <mat-form-field class="formWd" class="space">
      <mat-label>搜索内容</mat-label>
      <input matInput  type="search" [(ngModel)]="keyword"   [matAutocomplete]="auto" (input)="getSearchList()" >
      <button mat-icon-button  matSuffix mat-icon-button routerLink="/home/search/{{keyword}}">
        <mat-icon>search</mat-icon>
      </button>
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let m of searchList" [value]="m.name" routerLink="/home/detail/{{m.mid}}" class="center">
          <img class="example-option-img" aria-hidden [src]="m.url" height="18px" width="25px" style="margin-right: 2px">
          <span class="searchwords">{{m.name}}</span>
<!--          <small>Population: {{state.population}}</small>-->
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
    <!--实时推荐-->
    <div class="mytitle left">
      <mat-icon style="margin-right: 5px">video_library</mat-icon>
      实时推荐
    </div>
    <div *ngIf="movies===null">
      <nz-empty></nz-empty>
    </div>
    <div *ngIf="movies!==null">
      <div nz-row>
        <div nz-col nzSpan="2" class="center">
          <button mat-fab color="warn" (click)="onLinePre()"><mat-icon>arrow_back_ios</mat-icon></button>
        </div>
        <div nz-col nzSpan="20">
          <mat-grid-list  cols="6"  rowHeight="2:3" gutterSize="25px" >
          <mat-grid-tile
            *ngFor="let m of showOnLineMovies"
            [colspan]="1"
            [rowspan]="1"
            routerLink="/home/detail/{{m.mid}}">
            <div style="width: 100%;height: 100%">
              <div class="card" style="width: 98%;height: 83%">
                <div  style="height: 25%">
                  <mat-grid-list cols="6">
                    <mat-grid-tile [colspan]="5" [rowspan]="1" class="name center">
                      <span>{{m.name}}</span>
                    </mat-grid-tile>
                    <mat-grid-tile [colspan]="1" [rowspan]="1" >
                      <mat-icon class="icon center">movie</mat-icon>
                    </mat-grid-tile>
                    <mat-grid-tile [colspan]="6" [rowspan]="1" class="time left">
                      <span>{{m.issue}} | {{m.timelong}}</span>
                    </mat-grid-tile>
                  </mat-grid-list>
                </div>
                <div style="height: 75%">
                  <img  style="height: 100%;width: 100%" src="{{m.url}}">
                </div>
              </div>
              <div class="scoreBox" style="width: 98%;height: 25px">
                <mat-grid-list cols="6">
                  <mat-grid-tile [colspan]="1" [rowspan]="1">
                    <mat-icon  style="font-size: 25px">playlist_play</mat-icon>
                  </mat-grid-tile>
                  <mat-grid-tile [colspan]="5" [rowspan]="1">
                    <nz-rate style="height: 100%;width: 100%;" [ngModel]="m.score" nzAllowHalf nzDisabled></nz-rate>
                  </mat-grid-tile>
                </mat-grid-list>
              </div>
            </div>
          </mat-grid-tile>
        </mat-grid-list>
        </div>
        <div nz-col nzSpan="2" class="center">
          <button mat-fab color="warn" (click)="onLineDre()"><mat-icon>arrow_forward_ios</mat-icon></button>
        </div>
      </div>
    </div>

    <!--离线推荐-->
    <div class="mytitle left">
      <mat-icon style="margin-right: 5px">favorite</mat-icon>
      离线推荐
    </div>
    <div *ngIf="OutLineMovies===null ">
      <nz-empty></nz-empty>
    </div>
    <div *ngIf="OutLineMovies!==null">
      <div nz-row>
        <div nz-col nzSpan="2" class="center">
          <button mat-fab color="warn" (click)="outLinePre()"><mat-icon>arrow_back_ios</mat-icon></button>
        </div>
        <div nz-col nzSpan="20">
          <mat-grid-list  cols="6"  rowHeight="2:3" gutterSize="25px" >
            <mat-grid-tile
              *ngFor="let m of showOutLineMovies"
              [colspan]="1"
              [rowspan]="1"
              routerLink="/home/detail/{{m.mid}}">
              <div style="width: 100%;height: 100%">
                <div class="card" style="width: 98%;height: 83%">
                  <div  style="height: 25%">
                    <mat-grid-list cols="6">
                      <mat-grid-tile [colspan]="5" [rowspan]="1" class="name center">
                        <span>{{m.name}}</span>
                      </mat-grid-tile>
                      <mat-grid-tile [colspan]="1" [rowspan]="1" >
                        <mat-icon class="icon center">movie</mat-icon>
                      </mat-grid-tile>
                      <mat-grid-tile [colspan]="5" [rowspan]="1" class="time left">
                        <span>{{m.issue}} | {{m.timelong}}</span>
                      </mat-grid-tile>
                    </mat-grid-list>
                  </div>
                  <div style="height: 75%">
                    <img  style="height: 100%;width: 100%" src="{{m.url}}">
                  </div>
                </div>
                <div class="scoreBox" style="width: 98%;height: 25px">
                  <mat-grid-list cols="6">
                    <mat-grid-tile [colspan]="1" [rowspan]="1">
                      <mat-icon  style="font-size: 25px">playlist_play</mat-icon>
                    </mat-grid-tile>
                    <mat-grid-tile [colspan]="5" [rowspan]="1">
                      <nz-rate style="height: 100%;width: 100%;" [ngModel]="m.score" nzAllowHalf nzDisabled></nz-rate>
                    </mat-grid-tile>
                  </mat-grid-list>
                </div>
              </div>
            </mat-grid-tile>
          </mat-grid-list>
        </div>
        <div nz-col nzSpan="2" class="center">
          <button mat-fab color="warn" (click)="outLineDre()"><mat-icon>arrow_forward_ios</mat-icon></button>
        </div>
      </div>
    </div>
    <!--热门推荐-->
    <div class="mytitle left">
      <mat-icon style="margin-right: 5px">whatshot</mat-icon>
      热门推荐
    </div>
    <div *ngIf="hotMovies===null ">
      <nz-empty></nz-empty>
    </div>
    <div *ngIf="hotMovies!==null ">
      <div nz-row>
        <div nz-col nzSpan="2" class="center">
          <button mat-fab color="warn" (click)="hotPre()"><mat-icon>arrow_back_ios</mat-icon></button>
        </div>
        <div nz-col nzSpan="20">
          <mat-grid-list  cols="6"  rowHeight="2:3" gutterSize="25px" >
            <mat-grid-tile
              *ngFor="let m of showHotMovies"
              [colspan]="1"
              [rowspan]="1"
              routerLink="/home/detail/{{m.mid}}">
              <div style="width: 100%;height: 100%">
                <div class="card" style="width: 98%;height: 83%">
                  <div  style="height: 25%">
                    <mat-grid-list cols="6">
                      <mat-grid-tile [colspan]="5" [rowspan]="1" class="name center">
                        <span>{{m.name}}</span>
                      </mat-grid-tile>
                      <mat-grid-tile [colspan]="1" [rowspan]="1" >
                        <mat-icon class="icon center">movie</mat-icon>
                      </mat-grid-tile>
                      <mat-grid-tile [colspan]="5" [rowspan]="1" class="time left">
                        <span>{{m.issue}} | {{m.timelong}}</span>
                      </mat-grid-tile>
                    </mat-grid-list>
                  </div>
                  <div style="height: 75%">
                    <img  style="height: 100%;width: 100%" src="{{m.url}}">
                  </div>
                </div>
                <div class="scoreBox" style="width: 98%;height: 25px">
                  <mat-grid-list cols="6">
                    <mat-grid-tile [colspan]="1" [rowspan]="1">
                      <mat-icon  style="font-size: 25px">playlist_play</mat-icon>
                    </mat-grid-tile>
                    <mat-grid-tile [colspan]="5" [rowspan]="1">
                      <nz-rate style="height: 100%;width: 100%;" [ngModel]="m.score" nzAllowHalf nzDisabled></nz-rate>
                    </mat-grid-tile>
                  </mat-grid-list>
                </div>
              </div>
            </mat-grid-tile>
          </mat-grid-list>
        </div>
        <div nz-col nzSpan="2" class="center">
          <button mat-fab color="warn" (click)="hotDre()"><mat-icon>arrow_forward_ios</mat-icon></button>
        </div>
      </div>
    </div>

  </div>
</div>
<div style="height: 100px" class="bg"></div>


<!--<app-movie-detail [movie]="selectMovie"></app-movie-detail>-->
